<template>
  <div>
    <el-container>
      <el-aside class="left_bar" width="180px">
        <p class="left_title">基础管理</p>
        <el-menu mode="verticle" default-active="4">
          <el-menu-item class="menu-item" index="1" v-on:click="Monitor">监测资质</el-menu-item>
          <el-menu-item class="menu-item" index="2" v-on:click="RatesConfiguration">收费标准配置</el-menu-item>
          <el-menu-item class="menu-item" index="3" v-on:click="FormManager">表单管理</el-menu-item>
          <el-menu-item class="menu-item" index="4" v-on:click="Enterprise">企业信息管理</el-menu-item>
          <el-menu-item class="menu-item" index="5" @click="EnvironmentManager">环境质量点位管理</el-menu-item>
          <el-menu-item class="menu-item" index="6">采样规范管理</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-row>
          <el-tabs type="border-card" @tab-click="handleTabClick">
            <el-tab-pane label="全部">
              <el-row>
                <el-col :span="1">
                  <el-button type="primary" @click="addNewRecord=true">新增</el-button>
                </el-col>
                <el-col :span="1" :offset="1">
                  <el-button type="primary" @click="deleteRecord">删除</el-button>
                </el-col>
                <el-col :span="6" :offset="15">
                  <el-input placeholder="请输入关键字进行搜索" suffix-icon="el-icon-search" clearable></el-input>
                </el-col>
              </el-row>
              <!-- 添加记录部分 -->
              <el-dialog title="添加企业" :visible.sync="addNewRecord">
                <el-tabs>
                  <el-tab-pane label="添加企业">
                    <el-form label-width="120px">
                      <el-form-item label="企业名称">
                        <el-input v-model="formAddInfoList.Name"></el-input>
                      </el-form-item>
                      <el-form-item label="经纬度">
                        <el-input v-model="formAddInfoList.jingweidu"></el-input>
                      </el-form-item>
                      <el-form-item
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        label="详细地址"
                      >
                        <el-input v-model="formAddInfoList.addr"></el-input>
                      </el-form-item>
                      <el-form-item label="类别及级别">
                        <el-input v-model="formAddInfoList.level"></el-input>
                      </el-form-item>
                      <el-form-item label="联系人">
                        <el-input v-model="formAddInfoList.lineman"></el-input>
                      </el-form-item>
                      <el-form-item label="联系电话">
                        <el-input v-model="formAddInfoList.tel"></el-input>
                      </el-form-item>
                      <el-form-item label="行政区域">
                        <el-input v-model="formAddInfoList.zone"></el-input>
                      </el-form-item>
                      <el-form-item label="企业简介">
                        <el-input
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          v-model="formAddInfoList.introduction"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        label="主要原料"
                      >
                        <el-input v-model="formAddInfoList.mainUse"></el-input>
                      </el-form-item>
                      <el-form-item
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        label="主要辅料"
                      >
                        <el-input v-model="formAddInfoList.mainSupport"></el-input>
                      </el-form-item>
                      <el-form-item
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        label="主要产品"
                      >
                        <el-input v-model="formAddInfoList.mainProduction"></el-input>
                      </el-form-item>
                      <el-form-item label="生产工艺">
                        <el-input v-model="formAddInfoList.produce"></el-input>
                      </el-form-item>
                      <el-form-item label="污染治理工具">
                        <el-input v-model="formAddInfoList.pollution"></el-input>
                      </el-form-item>
                      <el-form-item label="单位平面图">
                        <el-input v-model="formAddInfoList.unitPlan"></el-input>
                      </el-form-item>
                      <el-form-item label="生产工艺图">
                        <el-input v-model="formAddInfoList.process"></el-input>
                      </el-form-item>
                    </el-form>
                    <!-- 提交部分 -->
                    <el-row>
                      <el-col :span="3" :offset="16">
                        <el-button type="success" @click="addEnterprise">添加</el-button>
                      </el-col>
                      <el-col :span="3" :offset="1">
                        <el-button type="info" @click="addNewRecord=false">取消</el-button>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                  <!-- 检测点位 -->
                  <el-tab-pane label="监测点位">
                    <el-card>
                      <div slot="header">
                        <span>基本信息</span>
                      </div>
                      <el-form label-width="120px">
                        <el-form-item label="点位名称">
                          <el-input v-model="point.name"></el-input>
                        </el-form-item>
                        <el-form-item label="点位编号">
                          <el-input v-model="point.no"></el-input>
                        </el-form-item>
                        <el-form-item label="点位种类">
                          <el-input v-model="point.pointType"></el-input>
                        </el-form-item>
                        <el-form-item label="废水种类">
                          <el-input v-model="point.waterType"></el-input>
                        </el-form-item>
                        <el-form-item label="废水排放去向">
                          <el-input v-model="point.waterToWhere"></el-input>
                        </el-form-item>
                        <el-form-item label="受纳水体">
                          <el-input v-model="point.shounawater"></el-input>
                        </el-form-item>
                        <el-form-item label="经纬度">
                          <el-input v-model="point.jingweidu"></el-input>
                        </el-form-item>
                        <el-form-item label="在线检测设备">
                          <el-input v-model="point.onlineshebei"></el-input>
                        </el-form-item>
                      </el-form>
                      <!-- 保存按钮 -->
                      <el-row>
                        <el-col :span="3" :offset="20">
                          <el-button type="success" @click="savePoint">保存</el-button>
                        </el-col>
                      </el-row>
                    </el-card>
                  </el-tab-pane>
                </el-tabs>
              </el-dialog>
              <!-- 删除记录部分 -->
              <!-- 表单部分 -->
              <el-row>
                <el-table :data="enterpriseInfoList" @selection-change="handleSelectionChange">
                  <el-table-column label="No."></el-table-column>
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column label="企业名称" prop="Name"></el-table-column>
                  <el-table-column label="控制级别" prop="ControlLevel"></el-table-column>
                  <el-table-column label="详细地址" prop="DetailAddress"></el-table-column>
                  <el-table-column label="联系人" prop="LegalName"></el-table-column>
                  <el-table-column label="联系电话" prop="PhoneNum"></el-table-column>
                  <el-table-column label="单位平面图" prop></el-table-column>
                  <el-table-column label="生产工艺图"></el-table-column>
                  <el-table-column label="治理工艺图"></el-table-column>
                  <el-table-column label="GIS"></el-table-column>
                  <el-table-column label="管理" fixed="right">
                    <template slot-scope="scope">
                      <el-button @click="handleClickSee(scope.row)" type="text" size="small">查看</el-button>
                      <el-button @click="handleClickDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="废水">
              <el-row>
                <el-col :span="1">
                  <el-button type="primary">新增</el-button>
                </el-col>
                <el-col :span="1" :offset="1">
                  <el-button type="primary">删除</el-button>
                </el-col>
                <el-col :span="6" :offset="15">
                  <el-input placeholder="请输入关键字进行搜索" suffix-icon="el-icon-search" clearable></el-input>
                </el-col>
              </el-row>
              <!-- 表单部分 -->
              <el-row>
                <el-table :data="enterpriseInfoList" @selection-change="handleSelectionChange">
                  <el-table-column label="No."></el-table-column>
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column label="企业名称" prop="Name"></el-table-column>
                  <el-table-column label="控制级别" prop="ControlLevel"></el-table-column>
                  <el-table-column label="详细地址" prop="DetailAddress"></el-table-column>
                  <el-table-column label="联系人" prop="LegalName"></el-table-column>
                  <el-table-column label="联系电话" prop="PhoneNum"></el-table-column>
                  <el-table-column label="单位平面图" prop></el-table-column>
                  <el-table-column label="生产工艺图"></el-table-column>
                  <el-table-column label="治理工艺图"></el-table-column>
                  <el-table-column label="GIS"></el-table-column>
                  <el-table-column label="管理" fixed="right">
                    <template slot-scope="scope">
                      <el-button @click="handleClickSee(scope.row)" type="text" size="small">查看</el-button>
                      <el-button @click="handleClickDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="重金属">
              <el-row>
                <el-col :span="1">
                  <el-button type="primary">新增</el-button>
                </el-col>
                <el-col :span="1" :offset="1">
                  <el-button type="primary">删除</el-button>
                </el-col>
                <el-col :span="6" :offset="15">
                  <el-input placeholder="请输入关键字进行搜索" suffix-icon="el-icon-search" clearable></el-input>
                </el-col>
              </el-row>
              <!-- 表单部分 -->
              <el-row>
                <el-table :data="enterpriseInfoList" @selection-change="handleSelectionChange">
                  <el-table-column label="No."></el-table-column>
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column label="企业名称" prop="Name"></el-table-column>
                  <el-table-column label="控制级别" prop="ControlLevel"></el-table-column>
                  <el-table-column label="详细地址" prop="DetailAddress"></el-table-column>
                  <el-table-column label="联系人" prop="LegalName"></el-table-column>
                  <el-table-column label="联系电话" prop="PhoneNum"></el-table-column>
                  <el-table-column label="单位平面图" prop></el-table-column>
                  <el-table-column label="生产工艺图"></el-table-column>
                  <el-table-column label="治理工艺图"></el-table-column>
                  <el-table-column label="GIS"></el-table-column>
                  <el-table-column label="管理" fixed="right">
                    <template slot-scope="scope">
                      <el-button @click="handleClickSee(scope.row)" type="text" size="small">查看</el-button>
                      <el-button @click="handleClickDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="污水处理厂">
              <el-row>
                <el-col :span="1">
                  <el-button type="primary">新增</el-button>
                </el-col>
                <el-col :span="1" :offset="1">
                  <el-button type="primary">删除</el-button>
                </el-col>
                <el-col :span="6" :offset="15">
                  <el-input placeholder="请输入关键字进行搜索" suffix-icon="el-icon-search" clearable></el-input>
                </el-col>
              </el-row>
              <!-- 表单部分 -->
              <el-row>
                <el-table :data="enterpriseInfoList" @selection-change="handleSelectionChange">
                  <el-table-column label="No."></el-table-column>
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column label="企业名称" prop="Name"></el-table-column>
                  <el-table-column label="控制级别" prop="ControlLevel"></el-table-column>
                  <el-table-column label="详细地址" prop="DetailAddress"></el-table-column>
                  <el-table-column label="联系人" prop="LegalName"></el-table-column>
                  <el-table-column label="联系电话" prop="PhoneNum"></el-table-column>
                  <el-table-column label="单位平面图" prop></el-table-column>
                  <el-table-column label="生产工艺图"></el-table-column>
                  <el-table-column label="治理工艺图"></el-table-column>
                  <el-table-column label="GIS"></el-table-column>
                  <el-table-column label="管理" fixed="right">
                    <template slot-scope="scope">
                      <el-button @click="handleClickSee(scope.row)" type="text" size="small">查看</el-button>
                      <el-button @click="handleClickDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="规模化养殖">
              <el-row>
                <el-col :span="1">
                  <el-button type="primary">新增</el-button>
                </el-col>
                <el-col :span="1" :offset="1">
                  <el-button type="primary">删除</el-button>
                </el-col>
                <el-col :span="6" :offset="15">
                  <el-input placeholder="请输入关键字进行搜索" suffix-icon="el-icon-search" clearable></el-input>
                </el-col>
              </el-row>
              <!-- 表单部分 -->
              <el-row>
                <el-table :data="enterpriseInfoList" @selection-change="handleSelectionChange">
                  <el-table-column label="No."></el-table-column>
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column label="企业名称" prop="Name"></el-table-column>
                  <el-table-column label="控制级别" prop="ControlLevel"></el-table-column>
                  <el-table-column label="详细地址" prop="DetailAddress"></el-table-column>
                  <el-table-column label="联系人" prop="LegalName"></el-table-column>
                  <el-table-column label="联系电话" prop="PhoneNum"></el-table-column>
                  <el-table-column label="单位平面图" prop></el-table-column>
                  <el-table-column label="生产工艺图"></el-table-column>
                  <el-table-column label="治理工艺图"></el-table-column>
                  <el-table-column label="GIS"></el-table-column>
                  <el-table-column label="管理" fixed="right">
                    <template slot-scope="scope">
                      <el-button @click="handleClickSee(scope.row)" type="text" size="small">查看</el-button>
                      <el-button @click="handleClickDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="危险废物">
              <el-row>
                <el-col :span="1">
                  <el-button type="primary">新增</el-button>
                </el-col>
                <el-col :span="1" :offset="1">
                  <el-button type="primary">删除</el-button>
                </el-col>
                <el-col :span="6" :offset="15">
                  <el-input placeholder="请输入关键字进行搜索" suffix-icon="el-icon-search" clearable></el-input>
                </el-col>
              </el-row>
              <!-- 表单部分 -->
              <el-row>
                <el-table :data="enterpriseInfoList" @selection-change="handleSelectionChange">
                  <el-table-column label="No."></el-table-column>
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column label="企业名称" prop="Name"></el-table-column>
                  <el-table-column label="控制级别" prop="ControlLevel"></el-table-column>
                  <el-table-column label="详细地址" prop="DetailAddress"></el-table-column>
                  <el-table-column label="联系人" prop="LegalName"></el-table-column>
                  <el-table-column label="联系电话" prop="PhoneNum"></el-table-column>
                  <el-table-column label="单位平面图" prop></el-table-column>
                  <el-table-column label="生产工艺图"></el-table-column>
                  <el-table-column label="治理工艺图"></el-table-column>
                  <el-table-column label="GIS"></el-table-column>
                  <el-table-column label="管理" fixed="right">
                    <template slot-scope="scope">
                      <el-button @click="handleClickSee(scope.row)" type="text" size="small">查看</el-button>
                      <el-button @click="handleClickDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="废气">
              <el-row>
                <el-col :span="1">
                  <el-button type="primary">新增</el-button>
                </el-col>
                <el-col :span="1" :offset="1">
                  <el-button type="primary">删除</el-button>
                </el-col>
                <el-col :span="6" :offset="15">
                  <el-input placeholder="请输入关键字进行搜索" suffix-icon="el-icon-search" clearable></el-input>
                </el-col>
              </el-row>
              <!-- 表单部分 -->
              <el-row>
                <el-table :data="enterpriseInfoList" @selection-change="handleSelectionChange">
                  <el-table-column label="No."></el-table-column>
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column label="企业名称" prop="Name"></el-table-column>
                  <el-table-column label="控制级别" prop="ControlLevel"></el-table-column>
                  <el-table-column label="详细地址" prop="DetailAddress"></el-table-column>
                  <el-table-column label="联系人" prop="LegalName"></el-table-column>
                  <el-table-column label="联系电话" prop="PhoneNum"></el-table-column>
                  <el-table-column label="单位平面图" prop></el-table-column>
                  <el-table-column label="生产工艺图"></el-table-column>
                  <el-table-column label="治理工艺图"></el-table-column>
                  <el-table-column label="GIS"></el-table-column>
                  <el-table-column label="管理" fixed="right">
                    <template slot-scope="scope">
                      <el-button @click="handleClickSee(scope.row)" type="text" size="small">查看</el-button>
                      <el-button @click="handleClickDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="噪声">
              <el-row>
                <el-col :span="1">
                  <el-button type="primary">新增</el-button>
                </el-col>
                <el-col :span="1" :offset="1">
                  <el-button type="primary">删除</el-button>
                </el-col>
                <el-col :span="6" :offset="15">
                  <el-input placeholder="请输入关键字进行搜索" suffix-icon="el-icon-search" clearable></el-input>
                </el-col>
              </el-row>
              <!-- 表单部分 -->
              <el-row>
                <el-table :data="enterpriseInfoList" @selection-change="handleSelectionChange">
                  <el-table-column label="No."></el-table-column>
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column label="企业名称" prop="Name"></el-table-column>
                  <el-table-column label="控制级别" prop="ControlLevel"></el-table-column>
                  <el-table-column label="详细地址" prop="DetailAddress"></el-table-column>
                  <el-table-column label="联系人" prop="LegalName"></el-table-column>
                  <el-table-column label="联系电话" prop="PhoneNum"></el-table-column>
                  <el-table-column label="单位平面图" prop></el-table-column>
                  <el-table-column label="生产工艺图"></el-table-column>
                  <el-table-column label="治理工艺图"></el-table-column>
                  <el-table-column label="GIS"></el-table-column>
                  <el-table-column label="管理" fixed="right">
                    <template slot-scope="scope">
                      <el-button @click="handleClickSee(scope.row)" type="text" size="small">查看</el-button>
                      <el-button @click="handleClickDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      // 记录被选中的企业
      selectItem: [],
      // 记录企业信息
      enterpriseInfoList: [],
      addNewRecord: false,
      addFormInfo: {
        name: ''
      },
      formWords: [
        '企业名称',
        '经纬度',
        '详细地址',
        '类别及级别',
        '联系人',
        '联系电话',
        '行政区域',
        '企业简介',
        '主要原料',
        '主要辅料',
        '主要产品',
        '生产工艺',
        '污染治理工艺',
        '单位平面图',
        '生产工艺图'
      ],
      formAddInfoList: {
        Name: '',
        jingweidu: '',
        addr: '',
        level: '',
        lineman: '',
        tel: '',
        zone: '',
        introduction: '',
        mainUse: '',
        mainSupport: '',
        mainProduction: '',
        produce: '',
        pollution: '',
        unitPlan: '',
        process: ''
      },
      point: {
        name: '',
        no: '',
        pointType: '',
        waterType: '',
        waterToWhere: '',
        shounawater: '',
        jingweidu: '',
        onlineshebei: ''
      }
    }
  },

  methods: {
    Monitor: function () {
      this.$router.push('/base/MonitoringQualification')
    },

    RatesConfiguration: function () {
      this.$router.push('/base/RatesConfiguration')
    },

    FormManager: function () {
      this.$router.push('/base/FormManager')
    },

    Enterprise: function () {
      // this.$router.push('/base/EnterpriseInfoManager')
    },

    EnvironmentManager: function () {
      this.$router.push('/base/EnvironmentManager')
    },

    handleTabClick: function (tab, event) {
      // console.log(tab,event)
      switch (tab.index) {
        case '0':
          addAllInfo()
          break
        case '1':
          alert('选项一')
          break
        case '2':
          alert('选项二')
          break
        case '3':
          alert('选项三')
          break
        case '4':
          alert('选项四')
          break
        case '5':
          alert('选项五')
          break
        case '6':
          alert('选项六')
          break
        case '7':
          alert('选项七')
          break
        case '8':
          alert('选项八')
          break
      }
    },
    addInfo: function () {},

    addEnterprise: function () {
      var params1 = {}
      params1.Name = this.formAddInfoList.Name
      params1.DetailAddress = this.formAddInfoList.addr
      params1.ControlLevel = this.formAddInfoList.level
      params1.LegalName = this.formAddInfoList.lineman
      params1.PhoneNum = this.formAddInfoList.tel
      // params.append(,this.formAddInfoList.mainUse
      params1.Product = this.formAddInfoList.produce
      params1.PollutionSolveTech = this.formAddInfoList.pollution
      this.axios
        .post('/BaseData/AddEntMsg', params1)
        .then(response => {
          this.getAllmsg()
        })
        .catch(ex => {
          console.log(ex)
        })
    },

    // 保存点位信息
    savePoint: function () {
      console.log(this.point)
      this.addNewRecord = false
    },

    getAllmsg: function () {
      this.axios
        .get('/BaseData/GetAllEntMsg', {
          params: {
            pageIndex: 1,
            pageSize: 20
          }
          // headers: {
          //   'Content-type': 'application/x-www-form-urlencoded'
          // }
        })
        .then(response => {
          // todo:加载数据到界面
          // console.log(response.data)
          this.enterpriseInfoList = response.data
        })
    },

    // 查看企业信息
    handleClickSee: function (index) {
      console.log(index)
    },
    // 修改企业信息
    handleClickDelete: function (index) {
      console.log(index)
    },

    // 删除的网络逻辑在此
    deleteRecord: function () {
      // selectItem中存储了所有被选中的企业信息
      if (this.selectItem == []) {
        return
      }
      var Ids = []
      for (var one in this.selectItem) {
        Ids.push(this.selectItem[one].Id)
      }
      console.log(Ids)
      this.axios
        .delete('BaseData/DeleteEntMsg', {
          data: Ids
        }, {
          header: {
            'Content-Type': 'application/json'
          }
        })
        .then(res => {
          // 重新加载界面，将删除的结果直接显示
          this.getAllmsg()
          console.log(res)
        })
    },

    // 对选中的row进行存储
    handleSelectionChange: function (val) {
      this.selectItem = val
    }
  },

  // 获取企业信息，
  beforeMount: function () {
    this.getAllmsg()
  }
}
</script>

<style>
.left_bar {
  background-color: transparent;
  height: 100%;
  background-color: gray;
  color: aliceblue;
}

.right_bar {
  height: 100%;
}

.left_title {
  text-align: center;
}

.menu-item {
  background-color: transparent;
}

.inputRates {
  width: 10px;
}

/* .addInfoForm{
  margin: 20px;
  width: 120px;
}
.addInfoForm input{
  margin: 20px;
  width: 120px;
} */
</style>
